<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/* 初始化所有标签的内边距和外边距,写在样式中最开始的位置 */
			*{             /* 通配符:指所有的标签 */
				margin: 0;
				padding: 0;
			}
			.box1{
				width:600px;
				height: 600px;
				background-color: pink;
				/* 设置盒子水平居中:将盒子左右外边距设置为auto */
				margin:120px auto;
			}
			.box2{
				width:600px;
				height: 600px;
				background-color: skyblue;
				margin: 80px auto;
			}
			/* 外边距问题1:相邻块级元素垂直外边距合并 */
			/* 解决:一般只给一个盒子设置外边距 */
			/* 外边距问题2:嵌套盒子之间外边距的塌陷 */
			/* 解决:1.给父盒子添加边框; */
			/* 	2.给父盒子添加内边距; */
			/* 3.给父盒子添加样式overflow:hidden; */
			.bbox{
				width: 300px;
				height: 300px;
				background-color: aqua;
				margin-top: 120px;
				/* border: 1px sold black; */
				/* padding-top: 100px; */
				overflow: hidden; /* 超出部分隐藏,能解决外边距塌陷问题 */
			}
			.box3{
				width: 150px;
				height: 150px;
				background-color: pink;
				margin-top: 50px; 
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="bbox">
		<div class= "box3"></div>
		</div>
	</body>
</html>
